<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Angular Testing</title>
	<link rel="shortcut icon" href="../favicon.ico">
</head>
<body>

<style>

*{
	margin:0;
	padding:0;
}

body{
	font:15px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
	text-align:center;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside, nav{
	display: block;
}



nav{
	display:inline-block;
	margin:60px auto 45px;
	background-color:#5597b4;
	box-shadow:0 1px 1px #ccc;
	border-radius:2px;
}

nav a{
	display:inline-block;
	padding: 18px 30px;
	color:#fff !important;
	font-weight:bold;
	font-size:16px;
	text-decoration:none !important;
	line-height:1;
	text-transform: uppercase;
	background-color:transparent;

	-webkit-transition:background-color 0.25s;
	-moz-transition:background-color 0.25s;
	transition:background-color 0.25s;
}


p{
	font-size:22px;
	font-weight:bold;
	color:#7d9098;
}


nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
	background-color:#e35885;
}


p b{
	color:#ffffff;
	display:inline-block;
	padding:5px 10px;
	background-color:#c4d7e0;
	border-radius:2px;
	text-transform:uppercase;
	font-size:18px;
}

</style>

<div id="main" ng-app>
	<!-- The navigation menu will get the value of the "active" variable as a class.
		 The $event.preventDefault() stops the page from jumping when a link is clicked. -->

	<nav class="{{active}}" ng-click="$event.preventDefault()">
		<!-- When a link in the menu is clicked, we set the active variable -->
		<a href="#" class="home" ng-click="active='home';action='home'">Home</a>
		<a href="#" class="projects" ng-click="active='projects'">Projects</a>
		<a href="#" class="services" ng-click="active='services'">Services</a>
		<a href="#" class="contact" ng-click="active='contact'">Contact</a>
	</nav>
	<!-- ng-show will show an element if the value in the quotes is truthful,
		 while ng-hide does the opposite. Because the active variable is not set
		 initially, this will cause the first paragraph to be visible. -->
	<p ng-hide="active">Please click a menu item</p>
	<p ng-show="active=='contact'">You chose <b>{{active}}</b>
		
		<a href="#"  ng-click="action='create'">Compose</a>
	
	
		<p ng-show="active=='contact' && action=='create'">Create....</b>
	
	
	
	
	</p>
</div>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</body>
</html>